<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>



<body>
    <!-- --------网页nav最头部部分 ------->
    <div class="nav">

        <!-- 最顶头部分topnav-w -->
        <div class="topNav-w">
            <div class="topnav">
                <div class="topnav-l">
                    <ul>
                        <li><a href="#">小米商城</a></li>
                        <li class="space"></li>
                        <li><a href="#">MIUI</a></li>
                        <li class="space"></li>
                        <li><a href="#">IoT</a></li>
                        <li class="space"></li>
                        <li><a href="#">云服务</a></li>
                        <li class="space"></li>
                        <li><a href="#">金融</a></li>
                        <li class="space"></li>
                        <li><a href="#">有品</a></li>
                        <li class="space"></li>
                        <li><a href="#">小爱开放平台</a></li>
                        <li class="space"></li>
                        <li><a href="#">企业团购</a></li>
                        <li class="space"></li>
                        <li><a href="#">资质证照</a></li>
                        <li class="space"></li>
                        <li><a href="#">协议规则</a></li>
                        <li class="space"></li>
                        <li><a href="#">下载app</a></li>
                        <li class="space"></li>
                        <li><a href="#">Select Region</a></li>
                    </ul>
                </div>
                <div class="topnav-c">
                    <ul>
                        <li><a href="#">登录</a></li>
                        <li class="space"></li>
                        <li><a href="#">注册</a></li>
                        <li class="space"></li>
                        <li><a href="#">消息通知</a></li>
                    </ul>
                </div>
                <div class="topnav-r">
                    <a href="#" class="car">
                        <span class="icon">&#xe600;</span>
                        <span>购物车( 0 )</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- head部分 -->
        <div class="head">
            <div class="head-l">
                <img src="./images/logo.png" alt="">
            </div>
            <div class="head-c">
                <ul>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">Redmi 红米</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="head-r">
                <div class="search">
                    <input type="text" class="txt">
                    <div class="search-r">
                        <input type="submit" class="btn" value="">
                        <span class="icon">&#xe63d;</span>
                    </div>
                </div>
                <div class="mi9">
                    <a href="#">小米9</a>
                    <a href="#">小米9 SE</a>
                </div>
            </div>
        </div>

        <!-- banner部分 -->
        <div class="banner">
            <div class="banner-lbt">
                <img src="./images/wangyuan.jpg" alt="">

                <div class="jtl-l">
                    <span class="icon-l">&#xe606;</span>
                </div>
                <div class="jtl-r">
                    <span class="icon-r">&#xe61b;</span>
                </div>
            </div>
            <div class="banner-dhl">
                <ul>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i> 手机 电话卡
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i>电视 盒子
                        </a>

                    </li>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i> 笔记本 平板</a>
                    </li>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i> 家电 插线板
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i> 出行 穿戴</a>
                    </li>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i> 智能 路由器</a>
                    </li>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i> 电源 配件</a>
                    </li>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i> 健康 儿童</a>
                    </li>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i> 耳机 音箱</a>
                    </li>
                    <li>
                        <a href="#">
                            <i>&#xe603;</i> 生活 箱包</a>
                    </li>

                </ul>
            </div>
        </div>

        <!-- banner 底下部分 -->
        <div class="banner-b">
            <div class="banner-one">
                <ul>
                    <li>
                        <a href="#">
                            <div class="xg">&#xe601;</div>

                            <div class="xgsj">选购手机</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="xg">&#xe602;
                            </div>

                            <div class="xgsj">企业团购</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="xg">&#xe602;
                            </div>

                            <div class="xgsj">F码通道</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="xg">&#xe604;</div>

                            <div class="xgsj">米粉卡</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="xg">&#xe605;</div>

                            <div class="xgsj">以旧换新</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="xg">&#xe610;</div>

                            <div class="xgsj">话费充值</div>
                        </a>
                    </li>
                    <li class="space1"></li>
                    <li class="space2"></li>
                    <li class="space3"></li>
                    <li class="space4"></li>
                    <li class="space5"></li>
                    <li class="space6"></li>
                    <li class="space7"></li>
                </ul>
            </div>
            <div class="banner-two">
                <img src="./images/sj.jpg" alt="">
            </div>
            <div class="banner-three">
                <img src="./images/3sj.jpg" alt="">
            </div>
            <div class="banner-four">
                <img src="./images/5jpg.jpg" alt="">
            </div>
        </div>

        <!-- banner广告手机 -->
        <div class="banner-phone">
            <img src="./images/djpg.jpg" alt="">
        </div>



    </div>

    <!-------------- 网页最头部结束------------- -->

    <!-----------------网页主体部分main--------------- -->
    <div class="main">
        <div class="cell">
            <div class="title">
                <div class="title-l">手机</div>
                <a href="#" class="title-r">
                    <span class="ck">查看全部</span>
                    <span class="y">&#xe603;
                        </span>
                </a>
            </div>
            <div class="nr">
                <div class="nr-l">
                    <img src="./images/sj3.jpg" alt="">
                </div>
                <div class="nr-r">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="./images/1.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <span>2999元</span>
                            </a>
                            <span class="sm">新品</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/2.jpg" alt="">
                                <h3> 小米8 屏幕指纹版 6GB+128GB</h3>
                                <p>全球首款压感屏幕指纹 骁龙845处理器</p>
                                <span>2999元</span>
                            </a>
                            <span class="sm">新品</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/3.jpg" alt="">
                                <h3> Redmi Note 7 3GB+32G</h3>
                                <p>4800万拍照千元机，18个月超长质保</p>
                                <span>2999元</span>
                            </a>
                            <span class="sm">新品</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/4.png" alt="">
                                <h3>小米Play 4GB+64GB</h3>
                                <p>5.84"小水滴全面屏，后置1200万 AI 双</p>
                                <span>2999元</span>
                            </a>
                            <span class="sm">新品</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/5.jpg" alt="">
                                <h3> 小米8青春版6GB+64GB</h3>
                                <p>潮流镜面渐变色，2400万自拍旗舰</p>
                                <span>2999元</span>
                            </a>
                            <span class="sm">减200元</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/6.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <span>2999元</span>
                            </a>
                            <span class="sm">新品</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/7jpg.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <span>2999元</span>
                            </a>
                            <span class="sm">新品</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/8jpg.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <span>2999元</span>
                            </a>
                            <span class="sm">新品</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 电磁炉 -->
        <div class="dcl">
            <img src="./images/ctp.jpg" alt="">
        </div>




        <!-- 家电 -->
        <div class="jd">
            <h3>家电</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">电视影音</a></li>
                <li><a href="#">电脑</a></li>
                <li><a href="#">家居</a></li>
            </ul>
        </div>
        <div class="jsq">
            <ul>
                <li class="cx">

                    <img src="./images/jsq.jpg" alt="">
                </li>
                <li>
                    <img src="./images/bsjpg.jpg" alt="">
                    <h4>米家恒温电水壶</h4>
                    <p>水温智能控制, 304 不锈钢内胆</p>
                    <span>199元</span>
                </li>
                <li>
                    <img src="./images/b.pg.jpg" alt="">
                    <h4>米家恒温电水壶</h4>
                    <p>水温智能控制, 304 不锈钢内胆</p>
                    <span>199元</span>
                </li>
                <li>
                    <img src="./images/c.jpg" alt="">
                    <h4>米家恒温电水壶</h4>
                    <p>水温智能控制, 304 不锈钢内胆</p>
                    <span>199元</span>
                </li>
                <li>
                    <img src="./images/d.jpg" alt="">
                    <h4>米家恒温电水壶</h4>
                    <p>水温智能控制, 304 不锈钢内胆</p>
                    <span>199元</span>
                </li>
                <li class="jqr">
                    <img src="./images/jqrjpg.jpg" alt="">
                </li>
                <li>
                    <img src="./images/ejpg.jpg" alt="">
                    <h4>米家恒温电水壶</h4>
                    <p>水温智能控制, 304 不锈钢内胆</p>
                    <span>199元</span>
                </li>
                <li>
                    <img src="./images/f.jpg" alt="">
                    <h4>米家恒温电水壶</h4>
                    <p>水温智能控制, 304 不锈钢内胆</p>
                    <span>199元</span>
                </li>
                <li>
                    <img src="./images/gpg.jpg" alt="">
                    <h4>米家恒温电水壶</h4>
                    <p>水温智能控制, 304 不锈钢内胆</p>
                    <span>199元</span>
                </li>
                <li>
                    <div class="top">
                        <div class="lm">
                            <div class="box">
                                <p>20W高速</p>
                                <h4>149元</h4>
                            </div>
                            <img src="./images/cdjpg.jpg" alt="">
                        </div>
                    </div>
                    <div class="bottom">
                        <a href="#">
                            <h3>浏览更多</h3>
                            <h4>热门</h4>
                        </a>
                    </div>
        </div>
        </li>
        </ul>

        <!-- 为你推荐 -->

        <div class="tj">
            <div class="wn">
                <h2>为你推荐</h2>
            </div>
            <div class="hlw">
                <ul>
                    <li>
                        <img src="./images/sdtjpg.jpg" alt="">
                        <div class="box3">
                            <h4>
                                小米红外遥控器</h4>
                            <p>
                                799元
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/sjxjpg.jpg" alt="">
                        <div class="box3">
                            <h4>
                                小米红外遥控器</h4>
                            <p>
                                799元
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/sjx2.jpg" alt="">
                        <div class="box3">
                            <h4>
                                小米红外遥控器</h4>
                            <p>
                                799元
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/dn.jpg" alt="">
                        <div class="box3">
                            <h4>
                                小米红外遥控器</h4>
                            <p>
                                799元
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/ktjpg.jpg" alt="">
                        <div class="box3">
                            <h4>
                                小米红外遥控器</h4>
                            <p>
                                799元
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 热评产品 -->

        <div class="cp">
            <h3>热评产品</h3>
        </div>
        <div class="rp">
            <ul>
                <li>
                    <img src="./images/1jpg.jpg" alt="">
                    <div class="box4">
                        <a href="#">
                        一到家就忙着安装，太好了，小巧玲珑的,外观精美,洗的照片太好看啦 </a>
                    </div>
                    <p class="pj">来自于lhz的评价</p>
                    <div class="icon">
                        <a href="#">小米米家照片打印机</a>
                        <i></i>
                        <span>
                            399元
                        </span>

                    </div>
                </li>
                <li>
                    <img src="./images/1jpg.jpg" alt="">
                    <div class="box4">
                        <a href="#">
                            一到家就忙着安装，太好了，小巧玲珑的,外观精美,洗的照片太好看啦 </a>
                    </div>
                    <p class="pj">来自于lhz的评价</p>
                    <div class="icon">
                        <a href="#">小米米家照片打印机</a>
                        <i></i>
                        <span>
                                399元
                            </span>

                    </div>
                    <li>
                        <img src="./images/1jpg.jpg" alt="">
                        <div class="box4">
                            <a href="#">
                            一到家就忙着安装，太好了，小巧玲珑的,外观精美,洗的照片太好看啦 </a>
                        </div>
                        <p class="pj">来自于lhz的评价</p>
                        <div class="icon">
                            <a href="#">小米米家照片打印机</a>
                            <i></i>
                            <span>
                                399元
                            </span>

                        </div>
                    </li>
                    <li>
                        <img src="./images/1jpg.jpg" alt="">
                        <div class="box4">
                            <a href="#">
                            一到家就忙着安装，太好了，小巧玲珑的,外观精美,洗的照片太好看啦 </a>
                        </div>
                        <p class="pj">来自于lhz的评价</p>
                        <div class="icon">
                            <a href="#">小米米家照片打印机</a>
                            <i></i>
                            <span>
                                399元
                            </span>

                        </div>
                    </li>
            </ul>
        </div>


        <!-- 内容 -->
        <div class="nei">
            <div class="nei-t">
                <h2>内容</h2>
            </div>
            <div class="ts">
                <ul>
                    <li class="li1">
                        <h3>图书</h3>
                        <a href="#" class="a1">哈利·波特与被诅咒的孩子</a>
                        <a href="#" class="a2">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！</a>
                        <a href="#" class="a3">29.17元</a>
                        <img src="./images/hlbt.png" alt="">
                        <div class="yd">
                            <ul>
                                <li>
                                    <span class="dot"></span>
                                </li>
                                <li>
                                    <span class="dot"></span>
                                </li>
                                <li>
                                    <span class="dot"></span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="li2">
                        <h3>MIUI 主题</h3>
                        <a href="#" class="a1">BROWN & FRIENDS定</a>
                        <a href="#" class="a2">
                                BROWN & FRIENDS 小米定制主题，是LINE FRIENDS在与小米公司</a>
                        <a href="#" class="a3">29.17元</a>
                        <img src="./images/hlbt2.png" alt="">
                        <div class="yd">
                            <ul>
                                <li>
                                    <span class="dot"></span>
                                </li>
                                <li>
                                    <span class="dot"></span>
                                </li>
                                <li>
                                    <span class="dot"></span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="li3">
                        <h3>游戏</h3>
                        <a href="#" class="a1">非人学园</a>
                        <a href="#" class="a2">脑洞大开的二次元竞技手游</a>
                        <a href="#" class="a3">29.17元</a>
                        <img src="./images/hlbt3.png" alt="">
                        <div class="yd">
                            <ul>
                                <li>
                                    <span class="dot"></span>
                                </li>
                                <li>
                                    <span class="dot"></span>
                                </li>
                                <li>
                                    <span class="dot"></span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="li4">
                        <h3>应用</h3>
                        <a href="#" class="a1">Forest</a>
                        <a href="#" class="a2">帮助您专心于生活中每个重要时刻</a>
                        <a href="#" class="a3">免费</a>
                        <img src="./images/hlbt4.png" alt="">
                        <div class="yd">
                            <ul>
                                <li>
                                    <span class="dot"></span>
                                </li>
                                <li>
                                    <span class="dot"></span>
                                </li>
                                <li>
                                    <span class="dot"></span>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 视频 -->
        <div class="sp">
            <div class="sp-title">
                <div class="sp-l">视频</div>
                <a href="#" class="sp-r">
                    <span class="ck2">查看全部</span>
                    <span class="y2">&#xe603; </span>
                </a>
            </div>
            <div class="sp-x">
                <ul>
                    <li>
                        <img src="./images/wy1jpg.jpg" alt="">
                        <a href="#" class="wy">王源 & 小米9 全新广告大片</a>
                        <p>好看又能打！我反正被帅到了，Will You？</p>
                    </li>
                    <li>
                        <img src="./images/wy2.jpg" alt="">
                        <a href="#" class="wy">王源 & 小米9 全新广告大片</a>
                        <p>好看又能打！我反正被帅到了，Will You？</p>
                    </li>
                    <li><img src="./images/wy3.jpg" alt="">
                        <a href="#" class="wy">王源 & 小米9 全新广告大片</a>
                        <p>好看又能打！我反正被帅到了，Will You？</p>
                    </li>
                    <li><img src="./images/wy.jpg" alt="">
                        <a href="#" class="wy">王源 & 小米9 全新广告大片</a>
                        <p>好看又能打！我反正被帅到了，Will You？</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 网页底部部分footer -->
    <div class="footer">
        <div class="footer-main">
            <div class="main-top">
                <ul>
                    <ul>
                        <li>
                            <i>&#xe602;</i>
                            <a href="#">预约维修服务</a>
                        </li>
                        <li><a href="#">七天无理由退货</a></li>
                        <li><a href="#">15天免费换货</a></li>
                        <li><a href="#">满150元包邮</a></li>
                        <li><a href="#">520余家售后网点</a></li>
                    </ul>
                </ul>
            </div>
            <div class="main-bottom"></div>
        </div>
    </div>
</body>

</html>